<!--柱状图-->
<template>
    <div class="app-container">
      <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item label="时间">
          <el-date-picker
            v-model="dateRange"
            size="small"
            style="width: 350px"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>

        <el-form-item>
            <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <h2>格口分拣统计</h2>
      <div id="chart_example" style="overflow:auto"></div>
         <el-dialog
            title="格口分拣明细"
            :visible.sync="dialogVisible"
            style="width:1800px;"
            >   
          <el-table v-loading="loading" :data="LevelSeortingList" @click="userDialogVisibleA()">
              <!-- <el-table-column type="selection" width="55" align="center" /> -->
              <el-table-column label="道口编号" align="center" prop="curPos"  />
              <el-table-column label="分拣数量" align="center" prop="sum"  />
          </el-table>
          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams1.pageNum"
            :limit.sync="queryParams1.pageSize"
            @pagination="getLevelSeortingList"
          />
         </el-dialog>
   </div>
  
</template>

<script>
  import echarts from 'echarts'
  // require('echarts/theme/macarons')   // echarts theme
  import resize from './mixins/resize'
  import { listLevelSeorting } from "@/api/system/WorkLog";

  const animationDuration = 3000

  export default {
    mixins: [resize],
    name: "LevelSeorting",
    data() {
      return {
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 日期范围
        dateRange: [],
        MapList:[],
        dialogVisible:false,
        LevelSeortingList:[],
        rows:[],
        BarList:[],
        curPos:[],
        sum:[],
        chart: null,
        queryParams: {
          curPos: undefined,
          sum: undefined,
        },
        queryParams1: {
          pageNum: 1,
          pageSize: 10,
        }
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.initChart()
      })
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    created() {
      this.getBarList();
    },
    methods: {
      getBarList() {
        this.loading = true;
        listLevelSeorting(this.addDateRange(this.queryParams, this.dateRange)).then( response => {
          this.MapList =response.rows;
          let MapList = this.MapList;
          this.curPos=[];
          this.sum=[];
          if(MapList){
            let obj = eval(MapList);

            for(let i=0;i<obj.length;i++){
              this.curPos.push(MapList[i].curPos);
            }
            for(let i=0;i<obj.length;i++){
              this.sum.push(MapList[i].sum);
            }
          }
          
          //动态插入数据时，数据在这里设置更新
          this.chart.setOption({
            xAxis: {
              data: this.curPos,
              axisTick:{
                show:false
              }
            },
            series: [{
              name:'分拣总数量',
              data: this.sum,
            },
            ]
          });
        });
      },
      initChart() {
        let that=this;
        // this.chart = echarts.init(this.$el, 'macarons')
        this.chart = echarts.init(document.getElementById('chart_example'));
        this.chart.setOption({
          // title:{
          //   text:'格口分拣统计',
          //   subtext:'纯属虚构',
          //   left:'center',
          //   textStyle:{
          //     color: '#000000'
          //   }
          // },        
          color: ['#3398DB'],
          tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            top: 60,
            left: '4%',
            right: '10%',
            bottom: '5%',
            containLabel: true
          },
          xAxis: [{
            name:'格口编号',
            type: 'category',
            triggerEvent:true,
            axisLabel: {    
              interval: 0,   //X轴坐标侧身显示
              rotate: 15,
            },
            axisTick: {
              alignWithLabel: true
            }
          }],
          yAxis: [{
            name:'分拣数量',
            type: 'value'             
          }],
          dataZoom:[
            {
              show:true,
              start:0,
              end:20,
            },
 
            {
              show:true,
              yAxisIndex:0,
              filterMode:'empty',
              width:30,
              height:'80%',
              showDataShadow: false,
              left:'100%'
            }
          ],


          legend: {
            
          },
          series: [{
            type: 'bar',
            barWidth: '30%',
            label: {
              normal: {
                  show: true,                
                  position: 'top',
                  formatter: '{c}'
              }
            },
            // animationDuration
          }, 
          ]
        })
        this.chart.on('click', function (params) { 
            that.dialogVisible = true;
            that.getLevelSeortingList();
          });
      },
       /** 搜索按钮操作 */
      handleQuery() {
        this.getBarList();
      },
       /** 重置按钮操作 */
      resetQuery() {
        this.dateRange = [];
        this.handleQuery();
      },
      getLevelSeortingList(){
             this.loading = true;
          listLevelSeorting(this.addDateRange(this.queryParams1, this.dateRange)).then(
        response => {       
        this.LevelSeortingList = response.rows;
        this.total = response.total;
        this.loading = false;
        })
      }
    }
  }
</script>
<style scoped>
  h2{
    text-align: center;
    padding: 0px;
    font-size: 18px;
    }
  #chart_example{
    width: 100%;
    height: 60vh;
    /* border: 1px solid	#3398DB; */
    margin: 0 auto;
  }
</style>